<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="6"
        :xl="5"
        style="margin-bottom: 10px"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div style="text-align: center">
              <el-upload
                :show-file-list="false"
                :on-success="handleSuccess"
                :on-error="handleError"
                :headers="headers"
                :action="updateAvatarApi"
                class="avatar-uploader"
              >
                <img
                  :src="userInfo.avatar ? userInfo.avatar : Avatar"
                  title="点击上传头像"
                  class="avatar"
                />
              </el-upload>
            </div>
            <ul class="user-info">
              <li>
                <div style="height: 100%">
                  <svg-icon icon-class="login" />登录账号
                  <div class="user-right">{{ userInfo.phone }}</div>
                </div>
              </li>
              <li>
                <div style="height: 100%">
                  <svg-icon icon-class="user1" />用户名
                  <div class="user-right">{{ userInfo.username }}</div>
                </div>
              </li>
              <li>
                <svg-icon icon-class="user1" /> 用户昵称
                <div class="user-right">{{ userInfo.nickName }}</div>
              </li>
              <li>
                <svg-icon icon-class="phone" /> 手机号码
                <div class="user-right">{{ userInfo.phone }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="6"
        :xl="5"
        style="margin-bottom: 10px"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>门店信息</span>
          </div>
          <div>
            <div style="text-align: center">
              <el-upload
                :show-file-list="false"
                :on-success="handleSuccess"
                :on-error="handleError"
                :headers="headers"
                :action="updateAvatarApi"
                class="avatar-uploader"
              >
                <img
                  :src="retails.image ? retails.image : Avatar"
                  title="点击上传头像"
                  class="avatar"
                />
              </el-upload>
            </div>
            <ul class="user-info">
              <li>
                <div style="height: 100%">
                  <svg-icon icon-class="yingxiao" />佣金金额
                  <div class="user-right">{{ retails.brokeragePrice }}</div>
                </div>
              </li>
              <li>
                <svg-icon icon-class="zujian" /> 门店积分
                <div class="user-right">{{ retails.integral }}</div>
              </li>
              <li>
                <svg-icon icon-class="unlock" /> 门店余额
                <div class="user-right">{{ retails.storeBalance }}</div>
              </li>
              <li>
                <div style="height: 100%">
                  <svg-icon icon-class="login" />地址
                  <div class="user-right">{{ retails.address }}</div>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="14">
        <!--    提现信息    -->
        <el-card class="box-card">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="银行卡提现" name="bank">
              <el-form
                ref="bank"
                :model="bank"
                :rules="bankRules"
                style="margin-top: 10px"
                size="small"
                label-width="100px"
              >
                <el-form-item label="银行卡号" prop="bankCode">
                  <el-input v-model="bank.bankCode" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="开户地址" prop="bankAddress">
                  <el-input v-model="bank.bankAddress" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="用户姓名" prop="realName">
                  <el-input v-model="bank.realName" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="提现金额" prop="extractPrice">
                  <el-input v-model="bank.extractPrice" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="">
                  <el-button
                    :loading="saveLoading"
                    size="mini"
                    type="primary"
                    @click="doSubmit('bank')"
                    >提现</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
           <!--  <el-tab-pane label="支付宝" name="alipay">
              <el-form
                ref="alipay"
                :model="alipay"
                :rules="alipayRules"
                style="margin-top: 10px"
                size="small"
                label-width="100px"
              >
                <el-form-item label="支付宝账号" prop="alipayCode">
                  <el-input v-model="alipay.alipayCode" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="用户姓名" prop="realName">
                  <el-input v-model="alipay.realName" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="提现金额" prop="extractPrice">
                  <el-input v-model="alipay.extractPrice" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="">
                  <el-button
                    :loading="saveLoading"
                    size="mini"
                    type="primary"
                    @click="doSubmit('alipay')"
                    >提现</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane> -->

           <!--  <el-tab-pane label="微信" name="wx">
              <el-form
                ref="wx"
                :model="wx"
                :rules="wxRules"
                style="margin-top: 10px"
                size="small"
                label-width="100px"
              >
                <el-form-item label="微信号" prop="wechat">
                  <el-input v-model="wx.wechat" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="提现金额" prop="extractPrice">
                  <el-input v-model="wx.extractPrice" style="width: 35%" />
                  <span style="color: #c0c0c0; margin-left: 10px"></span>
                </el-form-item>
                <el-form-item label="">
                  <el-button
                    :loading="saveLoading"
                    size="mini"
                    type="primary"
                    @click="doSubmit('wx')"
                    >提现</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane> -->
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import { queryBalace } from "@/api/yxSystemStore";
import store from "@/store";
import { isvalidPhone } from "@/utils/validate";
import { parseTime } from "@/utils/index";
import crud from "@/mixins/crud";
import { extract } from "@/api/yxSystemStore";
import Avatar from "@/assets/images/avatar.png";
export default {
  name: "Center",
  components: {},
  mixins: [crud],
  data() {
     const isNum = (rule, value, callback) => {
      const bankCode= /^[0-9]*$/
      if (!bankCode.test(value)) {
        callback(new Error('银行卡号只能为数字'))
      }else{
        callback()
      }
     }

    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    return {
      Avatar: Avatar,
      activeName: "bank",
      saveLoading: false,
      headers: {
        Authorization: getToken(),
      },
      userInfo: {},
      form: {},
      bank: {
        bankCode:null,
        realName:null,
        extractPrice:null,
        bankAddress:null
      },
      wx: {},
      alipay: {},
      bankRules: {
        bankCode: [
          { required: true, message: "请输入提现银行卡号", trigger: "blur" },
          {
            min: 16,
            max: 20,
            message: "长度在 16 到 20 个字符",
            trigger: "blur",
          },
           { validator: isNum, trigger: 'blur' }

        ],
        bankAddress: [
          { required: true, message: "请输入银行卡开户地址", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        extractPrice: [
          { required: true, trigger: "blur", message: "请输入提现金额" },
        ],
      },
     
      retails: {},
      alipayRules: {
        alipayCode: [
          { required: true, message: "请输入支付宝账号", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        extractPrice: [
          { required: true, trigger: "blur", message: "请输入提现金额" },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["user", "updateAvatarApi", "baseApi"]),
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("SET_USER"));
    this.form = {
      id: this.userInfo.id,
      nickName: this.userInfo.nickName,
      phone: this.userInfo.phone,
    };
    this.wx.uid = this.userInfo.id;
    this.wx.extractType = "wx";
    this.alipay.uid = this.userInfo.id;
    this.alipay.extractType = "alipay";
    this.bank.uid = this.userInfo.id;
    this.bank.extractType = "bank";
    this.initStore();
  },
  methods: {

    parseTime,
    handleClick(tab, event) {
      if (tab.name === "wx") {
      } else if (tab.name === "alipay") {
      } else {
      }
    },
    initStore() {
      const id = this.userInfo.retail;
      queryBalace(id)
        .then((resp) => {
          this.retails = resp;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    beforeInit() {
      this.url = "system/logs/user";
      return true;
    },
    handleSuccess(response, file, fileList) {
      this.$notify({
        title: "头像修改成功",
        type: "success",
        duration: 2500,
      });
      store.dispatch("GetInfo").then(() => {});
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message);
      this.$notify({
        title: msg.message,
        type: "error",
        duration: 2500,
      });
    },
    restForm(name) {
      //this.$refs[name].resetFields();
    },
    doSubmit(form) {
       let userExtract = null;
       var bank = this.bank;
       console.log(bank)
      if (this.$refs[form]) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.saveLoading = true;
                    console.log(this.bank )
              
            userExtract = form == "bank" ? bank : this.alipay;
            console.log( "ai  wochenggognle ")
          console.log( bank )
            extract(userExtract)
              .then((res) => {
                if(res.status==200){
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "success",
                });
                 this.bank={}
                 this.alipay={}
                 this.initStore();
                 }
              })
              .catch(() => {
                this.restForm(form);
                this.saveLoading = false;
              });
            this.restForm(form);
            this.saveLoading = false;
          }
        });
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.avatar-uploader-icon {
  font-size: 28px;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
.user-info {
  padding-left: 0;
  list-style: none;
  li {
    border-bottom: 1px solid #f0f3f4;
    padding: 11px 0;
    font-size: 13px;
  }
  .user-right {
    float: right;

    a {
      color: #317ef3;
    }
  }
}
</style>
